<template>
  <div>
    <div align="right"> <el-button size="medium" type="success" @click="start_print" round>打印凭据</el-button></div>
    <div >
      <el-container>
        <a-card>
          <div>
            <div class="tables">
              <div style="width: 1000px" id="pdfDom" ref="print">
                <p align="center" class="title">馆陶县元合全食品收款收据</p>
                <div style="width: 100%; margin-bottom: 10px;">
                  <div style="width: 35%;float: left;font-weight:bold">客户名称: &#8194;{{ tableData.consumer.name }} </div>
                  <div style="width: 35%;float: left;font-weight:bold">客户电话: &#8194;{{ tableData.consumer.phone }}</div>
                  <div style="width: 30%;float: right;font-weight:bold">送货日期: &#8194;{{ tableData.consumer.outTime }} </div>
                </div>
                <div style="width: 100%; margin-bottom: 10px;">
                  <div style="width: 35%;float: left;font-weight:bold">客户地址: &#8194;{{ tableData.consumer.address }}</div>
                </div>
                <table class="table" id="printpdf">
                  <tr >
                    <td colspan="" width="50" height="38">序号</td>
                    <td colspan="4" width="400"  height="38">商品品种</td>
                    <td colspan="2" width="100"  height="38">数量（个/袋/箱）</td>
                    <td colspan="2" width="100"  height="38">单价</td>
                    <td colspan="2" width="100"  height="38">单品总金额</td>
                  </tr>
                  <tr v-for="(item,index) in tableData.billList" :key="index">
                    <td colspan="1" width="50"  height="38">{{ index + 1 }}</td>
                    <td colspan="4" width="400"  height="38">{{ item.name }}</td>
                    <td colspan="2" width="100"  height="38">{{ item.count }}</td>
                    <td colspan="2" width="100"  height="38">{{ item.prices }}</td>
                    <td colspan="2" width="100"  height="38">{{ item.total }}</td>
                  </tr>
                  <tr>
                    <td colspan="7" width="900" height="38">合计(人民币大写): &nbsp;&nbsp; {{tableData.bigMoney}}</td>
                    <td colspan="4" width="200" height="38">合计(小写): &nbsp;&nbsp; {{tableData.money}}</td>
                  </tr>
                </table>
                <div style="width: 100%;margin-bottom: 10px;">
                  <div style="width: 30%;float: left;font-weight:bold">结算人: &#8194;{{tableData.consumer.myName}}</div>
                  <div style="width: 35%;float: left;font-weight:bold">服务电话: &#8194;{{tableData.consumer.serviceTel}}</div>
                </div>
              </div>
            </div>
          </div>
        </a-card>
      </el-container>
    </div>

  </div>

</template>

<script>

export default {

  props: {
    billData:{}
  },
  data() {
    return {
      tableData: {},
      loading: false
    }
  },

  components: {},
  mounted() {
    this.tableData = this.billData;
  },
  methods: {
    start_print(){
      this.$print(this.$refs.print);//$refs的值要和html里的ref一致
    }
  },
  watch:{
    billData (newV, oldV) {
      this.tableData = newV;
    }
  }

}
</script>

<style scoped>
.table p {
  text-align: center;
  margin: 15px 0;
  color: #000c17;
  font-size: 20px;
}
.table{
  border-style: solid;
  border-width: 1.0pt;
  font-variant: normal;
}
td{
  border-style: solid;
  border-width: 1.0pt;
}
.centent > p{
  float: left;
  font-size: 20px;
  font-variant: normal;
  color: #000c17;
}
.tables{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#pdfDom{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.title{
  font-size: 30px;
  font-variant: normal;
}

@page {
  margin-bottom: 0mm;
  margin-top: 0mm;
}
</style>
